<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="2000">
			<view class="title-box"><text>车辆管理</text></view>
		</z-nav-bar>
		<!-- 顶部 -->
		<u-sticky :offsetTop="offsetTop">
			<view class="topWrapper">
				<view class="searchBox">
					<view style="display: flex;" @tap="showStoreAlert = true">
						<text class="city">{{ storeName }}</text>
						<u-icon name="arrow-down" color="#fff"></u-icon>
					</view>

					<view class="search">
						<u--input :value="inputValue" clearable border="none" fontSize="12" placeholder="请输入车牌号/车架号搜索"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</view>
				<!-- 标签 -->
				<u-tabs :list="list" ref="tabs" :current="current" @change="tabChange"></u-tabs>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="item" v-for="(item, index) in carList" :key="item.id">
				<view class="flex-colum" @click.stop="btnClick(0, item)">
					<view class="flex-row-center-sb">
						<text class="title">车牌号：{{ item.carNo }}</text>
						<view class="btn-detail" style="color: #FFC000;background-color:#FFFFFF">
							{{ item.carStatus | carStatus }}
						</view>
					</view>

					<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

					<view class="text-line">
						<text class="text-name">车架号:</text>
						<text class="text-value">{{ item.vinNo | filterNull }}</text>
					</view>

					<view class="text-line">
						<text class="text-name">品牌/车系/车型:</text>
						<text class="text-value">{{ item.combinedField | filterNull }}</text>
					</view>

					<view class="text-line">
						<text class="text-name">归属门店:</text>
						<text class="text-value">{{ item.belongingStoreName | filterNull }}</text>
					</view>

					<view class="text-line">
						<text class="text-name">停靠门店:</text>
						<text class="text-value">{{ item.locatedStoreName | filterNull }}</text>
					</view>

					<view class="text-line">
						<text class="text-name">上下线状态:</text>
						<text class="text-value">{{item.lineStatus|lineStatus}}

							<!-- <text v-if="item.lineStatus == 0 && item.onlineBookingTime" style="color: #ff4949">（预计{{item.onlineBookingTime}}上线）</text> -->
						</text>
					</view>

					<text class="offline-text" v-if="item.offlineBookingTime">
						预计下线时间:{{item.offlineBookingTime}}
					</text>

					<text class="offline-text" v-if="item.onlineBookingTime">
						预计上线时间:{{item.onlineBookingTime}}
					</text>

				</view>
				<u-line color="#efefef" margin="0 0 10rpx 0"></u-line>
				<view style="display: inline-flex; justify-content: flex-end;">
					<view class="btn-detail" @click="btnClick('carOperation',item, index)"
						v-if="item.control==1">
						车辆操作
					</view>
					<view v-if="checkPermi(['car:basic:servicing']) && item.carStatus === 1 && item.repairStatus == 0"
						class="btn-detail" @click="btnClick(1, item)">
						完成整备
					</view>
					<view
						v-else-if="checkPermi(['car:basic:servicing']) && item.carStatus === 2 && item.repairStatus == 0"
						class="btn-detail" @click="btnClick(2, item)">
						车辆整备
					</view>
					<view
						v-else-if="checkPermi(['car:basic:beOnline']) && item.lineStatus === 0 && item.repairStatus == 0"
						class="btn-detail" @click="clickOnline(item)">
						车辆上线
					</view>
					<view v-else-if="
							checkPermi(['car:basic:insertingCoil']) &&
								item.lineStatus === 1 &&
								item.transferStatus == 0 &&
								item.carStatus == 1
						" class="btn-detail" @click="clickOnline(item)">
						车辆下线
					</view>

					<view class="btn-detail" @click="btnClick(0, item)">详 情</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 门店picker -->
		<u-picker :show="showStoreAlert" :columns="storeList" keyName="name" closeOnClickOverlay
			@close="showStoreAlert = false" @cancel="showStoreAlert = false" title="选择门店" confirmColor="#1573FF"
			@confirm="confimStore"></u-picker>
		<!-- 完成整备 -->
		<u-modal title="提示" content="确定完成整备?" :show="showRefurbish" showCancelButton @confirm="carBussinessDo(1)"
			@cancel="showRefurbish = false"></u-modal>

		<!-- 取消整备 -->
		<u-modal title="提示" content="确定车辆整备?" :show="showCancleRefurbish" showCancelButton @confirm="carBussinessDo(2)"
			@cancel="showCancleRefurbish = false"></u-modal>

		<HomeTabbar :tab="tabIndex"></HomeTabbar>
	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar/tabbar';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		carBasicList,
		apiCarServicing,
		apiLineStatus
	} from '@/api/car-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			HomeTabbar
		},
		data() {
			return {
				offsetTop: 0,
				inputValue: '',
				isSearch: false,
				showStoreAlert: false,
				showRefurbish: false,
				showCancleRefurbish: false,
				list: [{
						name: '全部',
						status: 0
					},
					{
						name: '待整备',
						status: 1
					},
					{
						name: '备发车',
						status: 2
					},
					{
						name: '预定中',
						status: 3
					},
					{
						name: '用车中',
						status: 4
					},
					{
						name: '调出中',
						status: 15
					},
					{
						name: '借出中',
						status: 16
					},
					{
						name: '已下线',
						status: 17
					}
				],
				current: 0,
				storeId: '',
				storeName: '选择门店',
				status: 0,
				carList: [],
				currentCar: {},
			};
		},
		onReady() {
			// #ifdef APP-PLUS||MP-ALIPAY
			uni.hideTabBar()
			// #endif
		},
		onLoad() {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync()
				.windowWidth - 0.5;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif

			uni.$on('refreshCarList', () => {
				this.mescroll.triggerDownScroll();
			});
		},
		computed: {
			storeList() {
				var result = [this.$store.state.initData.initData.storeList];
				return result;
			},
			navigationList() {
				return this.$store.state.initData.initData.navigationList;
			},
			tabIndex() {
				let tabIndex = 2;
				this.navigationList.map((item, index) => {
					if (item.name == '车辆管理') {
						tabIndex = index;
					}
				});
				// #ifdef APP
				return tabIndex + 1;
				// #endif
				// #ifdef MP-WEIXIN
				return tabIndex;
				// #endif

			}
		},
		methods: {

			upCallback(page) {
				const params = {
					locatedStoreId: this.storeId,
					keyword: this.inputValue,
					carStatus: this.status,
					// type: 1,
					pageNum: page.num,
					pageSize: page.size
				}

				carBasicList(this.toParams(params))
					.then(res => {
						//设置列表数据
						if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
						this.carList = this.carList.concat(res.rows); //追加新数据
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			//选择门店
			confimStore(e) {
				this.storeId = e.value[0].id;
				this.storeName = e.value[0].name;
				this.showStoreAlert = false;
				this.mescroll.triggerDownScroll();
				console.log('adasd ');
			},
			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			//切换标签
			tabChange(e) {
				this.current = e.index;
				this.status = e.status;
				this.mescroll.triggerDownScroll();
			},
			//业务操作1:完成整备 2 :取消整备  3:结束借调
			carBussinessDo(type) {
				switch (type) {
					case 1: //车辆整备
						apiCarServicing({
							id: this.currentCar.id,
							carStatus: 2
						}).then(res => {
							if (res.code == 200) {
								this.showRefurbish = false;
								this.$u.toast('操作成功');
								this.mescroll.triggerDownScroll();
							}
						});
						break;
					case 2: //取消整备
						apiCarServicing({
							id: this.currentCar.id,
							carStatus: 1
						}).then(res => {
							if (res.code == 200) {
								this.showCancleRefurbish = false;
								this.$u.toast('操作成功');
								this.mescroll.triggerDownScroll();
							}
						});

						break;
					default:
						break;
				}
			},
			// 车辆上下线操作
			clickOnline(item) {
				var content = '';
				var lineStatus = 0;
				if (item.lineStatus == 0) {
					content = '确定上线该车辆吗?';
					lineStatus = 1;
				} else {
					content = '确定下线该车辆吗?';
					lineStatus = 0;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: content,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res1) {
						if (res1.confirm) {
							apiLineStatus({
									lineStatus: lineStatus,
									id: item.id
								})
								.then(res2 => {
									if (res2.code == 200) {
										that.mescroll.triggerDownScroll();
									}
								})
								.catch(errors => {
									uni.$u.toast(errors);
								});
						} else {
							console.log('取消');
						}
					}
				});
			},

			//详情
			btnClick(type, item) {
				this.currentCar = item;
				let info = JSON.parse(JSON.stringify(item))
				this.$set(info,'carId',info.id)
				console.log(info,'itemitemite')
				switch (type) {
					case 0: //详情
						uni.navigateTo({
							url: '/car/detail?carId=' + this.currentCar.id
						});
						break;
					case 1:
						this.showRefurbish = true;
						break;
					case 2:
						this.showCancleRefurbish = true;
						break;
					case 3:
						uni.navigateTo({
							url: '/car/seconded/finish?carId=' + this.currentCar.id
						});
						break;
					case 'carOperation':
						uni.navigateTo({
							url: '/order/shortOrder/' + type + '?item=' + encodeURIComponent(JSON.stringify(info))
						});
					default:
						break;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, #3599ff 0%, #0275ed 100%);

			.city {
				font-size: 28upx;
				font-weight: bold;
				color: #fff;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				background-color: #ffffff;
				border-radius: 30rpx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.offline-text {
		font-size: 26rpx;
		color: #FFC000;
		margin: 0 20rpx 20rpx;
	}
</style>